<template>
    <h1>事件传参</h1>

    <!-- 获取event对象 -->
    <button @click="getevent">获取event对象</button>

    <!-- 传递参数 -->
     <!-- 注意：因为外层有双引号，所以括号里的参数要用单引号 -->
    <button @click="passdata('传递的参数')">传递参数</button>

    <!-- 传递参数获取event -->
     <!-- 注意：传递参数的同时获取event,需要添加: $event或使用内联箭头函数 -->
     <!--1.添加: $event-->
     <button @click="passdata2('传递的参数2',$event)">传递参数2</button>
	<!-- 2.使用内联箭头函数 -->
    <button @click="(event) => passdata3('传递的参数3', event)">传递的参数3</button>
</template>

<script>
export default{
    data(){
        return {
           count:0 
        }
    },
    methods:{
        getevent(e){
            // //vue中的event对象，就是原生JS的event对象
            console.log(e)
            e.target.innerHTML="改变按钮内容"//e.target就是鼠标点击的对象的父元素，innerHTML就是里面的text内容。
        },
        passdata(msg){
            //msg
            console.log(msg)
            
        },
        passdata2(msg,e){
            //msg
            console.log(msg)
            console.log(e)
        },

        passdata3(msg,e){
            //msg
            console.log(msg)
            console.log(e)
        }
    }
}
</script>